<template>
  <KView class="goods-bargain-detail">
    <template v-if="isShow">
      <KView class="goods-bargain-main">
        <KView class="goods-bargain-detail-img">
          <goods-detail-image :pic-list="goodsBargain.pics" :has-cart="false" @to-back="toBack"></goods-detail-image>
        </KView>
        <KView class="goods-bargain-detail-info">
          <KView class="goods-bargain-time">
            <bargain-countdown-view :goods-bargain="goodsBargain" @type-change="groupTypeChange"></bargain-countdown-view>
          </KView>
          <KView class="goods-bargain-detail-data clearfix">
            <KView class="goods-detail-info">
              <KView class="goods-detail-name ellipsis">{{goodsBargain.name}}</KView>
            </KView>
            <KView class="goods-detail-price">
              <KView class="goods-detail-price-data">
                <span class="price-unit">¥</span>
                <span class="price-num">{{goodsBargain.price}}</span>
              </KView>
              <KView class="goods-detail-price-text">砍成价</KView>
            </KView>
          </KView>
        </KView>
        <KView class="goods-bargain-detail-line"></KView>

        <KView class="goods-bargain-detail-content">
          <KView class="goods-bargain-detail-title">商品详情</KView>
          <KView class="goods-bargain-detail-inner-line"></KView>
          <KView>
            <sys-rich-text :text="goodsBargain.description"></sys-rich-text>
          </KView>
          <KView class="goods-bargain-detail-title goods-bargain-detail-tip">商品须知</KView>
          <KView class="goods-bargain-detail-inner-line"></KView>
          <KView>
            <sys-rich-text :text="goodsBargain.tip"></sys-rich-text>
          </KView>
        </KView>
      </KView>

      <KView class="goods-bargain-footer">
        <KView class="goods-bargain-footer-btn" :class="{'available':[1,2].indexOf(goodsBargain.type)!==-1}" @click="toBargainGoods">
          <span v-if="goodsBargain.type===0">未开始</span>
          <span v-else-if="goodsBargain.type===1">进行中</span>
          <span v-else-if="goodsBargain.type===2">已结束</span>
        </KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import GroupBargainApi from 'services/groupBargainApi';

  import SysRichText from 'common/sysRichText';
  import GoodsDetailImage from 'views/goodsDetail/goodsDetailImage';
  import BargainCountdownView from './bargainCountdownView';

  export default {
    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      let id = this.$route.params.id;
      return {
        isShow: false,
        id,
        isMiniprogram: process.env.isMiniprogram,
        goodsBargain: null
      };
    },

    created() {
      if (SystemUtil.isEmpty(this.id)) {
        this.toBack();
        return;
      }

      SystemUtil.showLoading();
      this.setGoodsBargain().then(goodsBargain => {
        if (goodsBargain !== null) {
          this.isShow = true;
        }
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setGoodsBargain() {
        return GroupBargainApi.getGoodsBargainDetail(this.id).then(res => {
          let systemTime = res.systemTime;
          let nowTime = this.$moment().valueOf();
          let rangeTime = 60 * 1000;
          if (!this.$moment(systemTime).isBetween(nowTime - rangeTime, nowTime + rangeTime, 'second', '[]')) {
            SystemUtil.alert('本地时间与服务器时间不同步，请重新设置时间', '提示').then(() => {
              this.toBack();
            }).catch(() => {});
            return null;
          }

          let goodsBargain = res.detail;
          this.goodsBargain = goodsBargain;
          return goodsBargain;
        });
      },

      toBargainGoods() {
        let goodsBargain = this.goodsBargain;
        if (goodsBargain.type === 0) {
          return;
        }

        let defId = goodsBargain.defId;
        let url = `/bargainSituation/${defId}`;
        if (this.isMiniprogram) {
          this.$emit('to-page', url);
        } else {

        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          wx.navigateBack();
        } else {
          this.$emit('to-page', '/groupBargain');
        }
      }
    },

    components: {
      SysRichText,
      GoodsDetailImage,
      BargainCountdownView
    }
  };

</script>

<style lang="scss">
  .goods-bargain-detail {
    height: 100%;

    .goods-bargain-detail-line {
      height: formatPx(18);
      background: #DADADA;
    }

    .goods-bargain-detail-title {
      border-left: formatPx(10) solid #FD5A3A;
      font-size: formatPx(36);
      padding-left: formatPx(15);
      line-height: formatPx(40);
      height: formatPx(40);
    }

    .goods-bargain-main {
      height: calc(100% - #{formatPx(110)});
      overflow: auto;

      .goods-bargain-detail-img {
        height: formatPx(450);
      }

      .goods-bargain-detail-info {
        margin-bottom: formatPx(40);

        .goods-bargain-detail-data {
          padding: 0 formatPx(30);
          margin-top: formatPx(40);
          height: formatPx(95);

          .goods-detail-info {
            float: left;
            width: calc(100% - #{formatPx(170)});

            .goods-detail-name {
              color: #2f3135;
              font-size: formatPx(30);
            }
          }

          .goods-detail-price {
            float: right;
            width: formatPx(160);

            .goods-detail-price-data {
              color: #fd5a3a;
              font-weight: bold;
              text-align: center;

              .price-unit {
                font-size: formatPx(32);
                line-height: formatPx(40);
                margin-right: formatPx(5);
              }

              .price-num {
                font-size: formatPx(40);
                line-height: formatPx(40);
              }
            }

            .goods-detail-price-text {
              margin-top: formatPx(8);
              font-size: formatPx(26);
              color: #999999;
              text-align: center;
            }
          }
        }
      }

      .goods-bargain-detail-content {
        margin-top: formatPx(50);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(20);

        .goods-bargain-detail-inner-line {
          height: 1px;
          background: #DADADA;
          margin: formatPx(30) 0;
        }

        .goods-bargain-detail-tip {
          margin-top: formatPx(30);
        }
      }
    }

    .goods-bargain-footer {
      height: formatPx(80);
      padding: formatPx(15) formatPx(30);

      .goods-bargain-footer-btn {
        height: 100%;
        line-height: formatPx(80);
        font-size: formatPx(28);
        text-align: center;
        border-radius: formatPx(40);
        color: #999999;
        background: #f0f0f0;

        &.available {
          background: #fd5a3a;
          color: #ffffff;
        }
      }
    }
  }

</style>
